<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8"></meta>
<script type="text/javascript" src="/js/vue.js"></script>
<title>Vue.js</title>
</head>
<body>
	<h1>VMODEL数据源</h1>
	<hr></hr>
	<div id="app">
		<p>原始信息：{{score}}</p>
		
		<p>
			model<input type="text" v-model="score" ></input>
		</p>
		<p>
			modelLAzy<input type="text" v-model.lazy="score" ></input>
		</p>
		<p>
			modelNumber<input type="text" v-model.number="score" ></input>
		</p>
		<p>
			modelTrim<input type="text" v-model.trim="score" ></input>
		</p>
		<hr></hr>
		<h3>文本域</h3>
		<textarea rows="10" cols="10" v-model="score"></textarea>
		<hr></hr>
		<h3>多选框绑定一个值</h3>
		<input type="checkbox" id="isTrue" v-model="isTrue" ></input>
		<label for="isTrue" >{{isTrue}}</label>
		<hr></hr>
		<h3>多选框绑定数组</h3>
		<p>
			<input type="checkbox" id="zhangfeng" value="zhangfeng" v-model="webNames" ></input>
			<label for="isTrue" >zhangfeng</label>
			
			<input type="checkbox" id="zfeng" value="zfeng" v-model="webNames" ></input>
			<label for="isTrue" >zfeng</label>
			
			<input type="checkbox" id="zf" value="zf" v-model="webNames" ></input>
			<label for="isTrue" >zf</label>
		</p>
		<p >{{webNames}}</p>
		
		<hr></hr>
		<h3>单选框绑定一个值</h3>
		<p>
			<input type="radio" id="one" value="男" v-model="sex" ></input>
			<label for="one">男</label>
			
			<input type="radio" id="two" value="女" v-model="sex" ></input>
			<label for="two">女</label>
			<p>{{sex}}</p>
		</p>
		
	</div>
	
	<script type="text/javascript">
		var app = new Vue({
			
			el:'#app',
			data:{
				score:0,
				isTrue:true,
				webNames:[],
				sex:''
			}
		});
		
	</script>
</body>
</html>